<template>
    <div class="allset">
        <div v-show="Topshow" class="Top">
            <span style="float:left">
                <router-link to="/myself">
                    <b>
                        <i class="iconfont icon-xiangzuojiantou"></i>
                    </b>
                </router-link>
            </span>
            <h3 style="text-align: center;">
                    <b>
                        设置
                    </b>
            </h3>

            
        </div>
        <div v-show="alltext" class="alltext">
            <div v-for="(textlist,index) in text" :key="index" > 
                <span @click="link($event)" class="alltext_text" style="float:left;">
                    <span style="display:none">{{textlist.num}}</span>
                    {{textlist.title}} 
                </span>
                <span class="alltext_icon">
                    <i class="iconfont icon-xiangyoujiantou"></i>
                </span> 
            </div>
        </div>




    <van-popup class="changepasswordcontain" v-model="oldsuccessnew" position="bottom" :style="{ height: '30%' }">
    <div>
        <p><input   class="accountusername"  placeholder="username"/></p>
        <p><input   type="password" class="accountoldpassword"  placeholder="Oldpassword"/></p>
        <p><input   type="password" class="accountnewpassword"  placeholder="Newpassword"/></p>
        <p>
        <van-button style="margin-left:60%;" type="primary" @click="hidechangepassword()">取消</van-button>
        <van-button type="success" @click="oldsuccessnewbtn()">确认</van-button>
        </p>
    </div>
    </van-popup>



<!-- 黑名单 -->
<div class="accountcontain" v-show="blacklist">
    <span style="float:left" @click="collect=false;Topshow=true;alltext=true;account=false;">
            <b>
                <i style="padding:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
            </b>
    </span>
    <h3 style="text-align: center;padding:0.2rem">
        <b>黑名单列表</b>
    </h3>
    <div>
        <img src="../../assets/img/headimg.jpg" alt="头像"> 
        <span>尔尔辞晚</span>
        <span class="btn">
            <button>
                移除
            </button>
        </span>
    </div>

    <div>
        <img src="../../assets/img/headimg.jpg" alt="头像"> 
        <span>尔尔辞晚</span>
        <span class="btn">
            <button>
                移除
            </button>
        </span>
    </div>

    <div>
        <img src="../../assets/img/headimg.jpg" alt="头像"> 
        <span>尔尔辞晚</span>
        <span class="btn">
            <button>
                移除
            </button>
        </span>
    </div>





</div>

        
<!-- 全部收藏夹列表 -->

<div class="collect" v-show="collect">
    <span style="float:left" @click="blacklist=false;Topshow=true;alltext=true;account=false;">
            <b>
                <i style="padding:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
            </b>
    </span>
    <h3 style="text-align: center;padding:0.2rem">
        <b>收藏夹</b>
        <van-popover style="float: right; margin-right: 0rem;"
        v-model="showcollectselect"
        trigger="click"
        placement="bottom-end"
        >   
        <div class="list">
            <ul>
                <li @click="showcollect">
                    新建
                </li>
                <!--点击新建出现弹出框进行新建-->
                    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
                    <div>
                            <input style="width: 80%;margin-left: 10%;height: 20%;padding: 0.2rem;margin-top: 10%;"  id="collectname"  placeholder="请输入新建收藏夹名称"/>
                        <p style="margin-top: 10%;">
                        <van-button style="margin-left:70%;" type="primary" @click="hidecollect">取消</van-button>
                        <van-button type="success" @click="newcollectyes">确认</van-button>
                        </p>
                    </div>
                    </van-popup>
                <!-- <li>全部删除</li> -->
            </ul>
        </div>
        <template #reference>
            <van-button style="width: 1rem;height: 0.8rem;margin-right: 0rem;border:none">
                <i style="margin-right: 0rem;" class="iconfont icon-gengduo"></i>
            </van-button>
        </template>
        </van-popover>
    </h3>
    <div>
        <!-- 遍历收藏夹的内容 -->
        <div v-for="(collectli,index) in collectlist" :key="index">
            <span class="collecttext">
                <p class="collectionName">{{collectli.collectionName}}</p>
                <p class="collectid" style="display:none">{{collectli.collectionNameId}}</p><!--收藏夹id-->
            </span>
            <span class="collectbtn">
                <button class="lookcollectcontain" @click="lookcollectcontain(index)">查看</button>
                <button class="deletecollect" @click="deletecollect(index)">删除</button>
                <!-- <button class="editcollect" @click="editcollect()">编辑</button> -->
            </span>
        </div>
    </div>
</div>


        <!-- 单个收藏夹内容 -->
        <div class="listcollect" v-show="listcollect">
            <span style="float:left">
                    <b @click="hidelistcollect()">
                        <i style="padding:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
                    </b>
            </span>
            <h3 style="text-align: center;padding:0.2rem">
                <b>
                    {{collectname}}
                </b>
            </h3>
            <div class="post" v-for="(collectone,index) in onecollectcontain" :key="index">
                <div class="top">
                    <a style="margin-left:0rem" href="javascript:;">
                        <van-image 
                            width="1rem" 
                            height="1rem" 
                            radius="100%" 
                            fit="cover" 
                            :src="collectone.img" 
                        />
                        <p>
                            {{collectone.nickname}}
                            <!-- 收藏帖子 的用户昵称 -->
                        </p>
                        <p style="display:none">
                            {{collectone.bodyId}}
                            <!-- 收藏帖子 的id -->
                        </p>
                        <p>
                            {{collectone.time}}
                            <!-- 收藏帖子的时间 -->
                        </p>
                    </a>
                    <van-popover style="margin-right: 0rem;"
                    v-model="showPopover"
                    trigger="click"
                    placement="bottom-end"
                    >   
                    <div class="list">
                        <ul>
                            <li @click="deletecollectlis(index)">取消收藏</li>
                            <!-- <li>移动到</li> -->
                        </ul>
                    </div>
                    <template #reference>
                        <van-button style="width: 1rem;height: 0.8rem;margin-right: 0rem;border:none">
                            <i style="margin-right: 0rem;" class="iconfont icon-gengduo"></i>
                        </van-button>
                    </template>
                    </van-popover>
                </div>
                <div class="font">
                    这里是文案！
                </div>
                <div class="pic">
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                </div>



                <!-- <div class="bottom">
                    <Like></Like>
                    <Talk></Talk>
                    <i class="iconfont icon-shoucang" style="color:	#FFD700"></i>
                </div> -->
            </div>

        </div>




    <p id="userid" style="display:none"></p>
    <p id="username" style="display:none"></p>
    <p id="roles" style="display:none"></p>


</div>
</template>

<script>


import axios from 'axios'

import Ifyes from '../common/Ifyes.vue'
import jwtDecode from 'jwt-decode'
import Report from '../common/post/Report.vue'
import Talk from '../common/post/Talk.vue'
import Like from '../common/post/Like.vue'
import Love from '../common/post/Love.vue'


export default {
    name:'SetUp',
    data(){
        return{
            oldsuccessnew:false,
            show: false,
            collect:false,
            listcollect:false,
            Topshow:true,
            alltext:true,
            blacklist:false,
            showPopover: false,
            showcollectselect: false,
            collectlist:[],
            onecollectcontain:[],
            collectname:'',
            text:[
                {title:"修改密码"},
                // {title:"黑名单"},
                {title:"收藏夹"},
                // {title:"新消息通知"},
                // {title:"关于乐圈"},
                {title:"退出登录"},
                {title:"注销账号"},
                {title:"进入后台管理系统"}
            ]
        }
    },
    mounted() {
        let token=sessionStorage.getItem("token")
        console.log(token)
        const decode =  jwtDecode(token);
        var userid  = document.getElementById("userid");//id
        userid.innerHTML=decode.userId;
        var username  = document.getElementById("username");//username账号
        username.innerHTML=decode.username;
                //获取用户的身份
        var roles = document.getElementById("roles")
        roles.innerHTML=decode.roles;
        if(decode.roles=="user"){
            //用户身份
          console.log(this.text[4].title)
          this.text=[
                {title:"修改密码"},
                {title:"收藏夹"},
                {title:"退出登录"},
                {title:"注销账号"},
            ]
        }else{
            //管理员身份
            console.log(textlist[0])
            this.text=[
                {title:"修改密码"},
                {title:"收藏夹"},
                {title:"退出登录"},
                {title:"注销账号"},
                {title:"进入后台管理系统"},
            ]
        }
    },
    methods:{
        //隐藏修改密码的框
        hidechangepassword(){
            // 来这里
            //重新加载本页面
            //  this.oldsuccessnew=false;
            this.$router.go(0)
            //  重新加载设置页面
        },
        //取消收藏帖子
        deletecollectlis(index){
            console.log(index)
            axios({
                //来这里
                url:`/collection/deleteCollection?list=${index}`,
                method:'DELETE',
                headers:{
                   'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                    console.log(data)
                    if(data.data.code=="20000"){
                        console.log("成功删除收藏的帖子")
                        //重新进行遍历该收藏夹


                    }else{
                        console.log(data.data.message)
                    }
            }).catch(err => {
                console.log(err)
            })
        },
        //根据旧密码修改成新密码
        revisepassword(){
            this.oldsuccessnew=true
        },
        //确认修改密码
        oldsuccessnewbtn(){
            this.oldsuccessnew=false
            //确认修改密码的接口
            var accountoldpassword = document.getElementsByClassName("accountoldpassword")[0].value;
            var accountnewpassword = document.getElementsByClassName("accountnewpassword")[0].value;
            axios({
                url:'/users/modifyPassword',
                method:'put',
                params :{
                    password:accountoldpassword,
                    rePassword:accountnewpassword,
                    username:username.innerHTML
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                if(data.data.code==20000){
                    console.log(data.data.message)
                    console.log("修改旧密码成功")
                    //修改旧密码成功之后应该取消session的存储token进行重新登录/返回首页
                    sessionStorage.removeItem("token");
                    //进入首页
                    this.$router.push('/dynamic/recommend');
                    
                }else{
                    console.log(data.data.data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //对于新建收藏夹的操作
        showcollect() {
            console.log("7777")
            this.show = true;
        },
        hidecollect(){
            this.oldsuccessnew=false
            console.log("关闭收藏夹")
            this.show = false;
            this.showcollectselect=false;
        },
        newcollect(){
            console.log("新建收藏夹")
        },
        //新建收藏夹
        newcollectyes(){
            //进行传递参数
            var collectionName = document.getElementById("collectname").value
            axios({
                url:'/collectionName/addCollectionName',
                method:'post',
                params :{
                    collectionName:collectionName,
                    flag:0,
                    userId :userid.innerHTML,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                if(data.data.code==20000){
                    console.log("111111111111")
                    console.log(data)
                    this.show = false;
                    this.showcollectselect=false;

                    //重新遍历一下收藏夹
                    //来这里
                    axios({
                        url:`/collectionName/queryCollectionName?userId=${userid.innerHTML}`,
                        method:'get',
                        data :{
                            // userId:userid.innerHTML,
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data => {
                        console.log("7777777777888888")
                        //遍历所有收藏夹
                        if(data.data.code==20000){
                            console.log("111111")
                            console.log(data.data.data)
                            this.collectlist=data.data.data
                            console.log(this.collectlist[0])

                        }else{
                            console.log(data.data.data)
                            console.log("77777777777777777777777")
                        }
                        
                    }).catch(err => {
                        console.log(err)
                    })

                }else{
                    console.log("222222222222222")
                    console.log(data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        link(e){
                if(e.currentTarget.innerText=="修改密码"){
                    this.Topshow=false;
                    this.alltext=false;
                    this.oldsuccessnew=true

                }else if(e.currentTarget.innerText=="黑名单"){
                    this.Topshow=false;
                    this.alltext=false;
                    this.blacklist=true;
                }else if(e.currentTarget.innerText=="注销账号"){
                    //调用账号注销的接口
                    // var userId  = document.getElementById("userid").innerHTML
                    // console.log(userId)
                    axios({
                        url:'/users/deleteUsers',
                        method:'DELETE',
                        params :{
                            userId:userid.innerHTML,
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data => {
                        if(data.data.code==20000){
                            console.log(data.data.message)
                            //注销之后跳转到首页
                            sessionStorage.removeItem("token");
                            //移除之后跳转到首页
                            window.location.href="/"

                        }else{
                            console.log(data.data.data)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else if(e.currentTarget.innerText=="退出登录"){

                    axios({
                        url:'/users/outLogin',
                        method:'post',
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }

                    }).then(data => {
                        console.log(data)
                        console.log("4444444444444444")
                        if(data.data.code==20000){
                            console.log(data.data.data)
                            console.log("退出登录，此时应该将token存储为空值")
                            sessionStorage.removeItem("token");
                            sessionStorage.removeItem("allUnread");
                            //断开ws连接
                            this.global.ws.close()
                            //移除之后跳转到首页
                            this.$router.push('/dynamic/recommend');
                        }else{
                             console.log(data.data.data)
                        }
                    }).catch(err => {
                        console.log("1111111")
                        console.log(err)
                    })

                    

                }else if(e.currentTarget.innerText=="收藏夹"){
                    //遍历收藏夹！！！！
                    this.Topshow=false;
                    this.alltext=false;
                    this.blacklist=false;
                    this.collect=true;
                    //遍历收藏夹接口
                    axios({
                        url:`/collectionName/queryCollectionName?userId=${userid.innerHTML}`,
                        method:'get',
                        data :{
                            // userId:userid.innerHTML,
                        },
                        headers:{
                           'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data => {
                        console.log("7777777777888888")
                        //遍历所有收藏夹
                        if(data.data.code==20000){
                            console.log("111111")
                            console.log(data.data.data)
                            this.collectlist=data.data.data
                            console.log(this.collectlist)
                        }else{
                            console.log(data.data.data)
                            console.log("77777777777777777777777")
                        }
                        
                    }).catch(err => {
                        console.log(err)
                    })

                    
                }else{
                    this.$router.push("/backstage")
                    //进入后台管理系统

                    //进入后台管理系统
                    // 输入后台管理系统的地址信息
                }
        },
        bindShow(){
            this.showArea= true;
        },
        bindCancel(){
            this.showArea= false;
        },
        //地区选择
        onAreaConfirm(val) {
            this.showArea = false;
            this.arrArea = val;
            var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name;
            this.valueArea = addrInfo
        },

        //查看具体收藏夹内容！！！！
        lookcollectcontain(index){
            //获取收藏夹id
            const collectid = document.getElementsByClassName("collectid")[index];
            console.log(collectid.innerHTML)
            //获取收藏夹名字
            var collectionName =  document.getElementsByClassName("collectionName")[index]
            console.log(collectionName.innerHTML)

            axios({
                url:'/collection/queryCollectionByType',
                method:'get',
                params :{
                    collectionNameId:collectid.innerHTML,
                    userId:userid.innerHTML,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                console.log("888888888888")
                console.log(data)
                if(data.data.code==20000){
                    console.log("11111111111111")
                    console.log(data.data.data)//具体一个收藏夹里的内容
                    //如果收藏夹里面没东西就不进去了
                    if(JSON.stringify(data.data.data) === '{}'){
                        alert("收藏夹没内容请先添加内容")
                    }else{
                        this.listcollect=true;
                        this.collect=false;
                        console.log(index)
                        this.collectname= collectionName.innerHTML
                        this.onecollectcontain=data.data.data
                        //把每一个收藏夹具体的内容推进去
                    }


                }else{
                    console.log(data.data.message)
                }
                // console.log(data)
            }).catch(err => {
                console.log(err)
            })

        },
        //返回收藏夹总页面
        hidelistcollect(){
            this.listcollect=false;
            this.collect=true;
        },
        //删除具体收藏夹内容！！！！
        deletecollect(index){
        //删除具体收藏夹接口！！！
        var collectid  = document.getElementsByClassName("collectid")[index];
        // var arrdeletelist=[];
        // arrdeletelist.push(collectid.innerHTML)
            axios({
                url:`/collectionName/deleteCollectionName?list=${collectid.innerHTML}`,
                method:'DELETE',
                // params :{
                //     list:arrdeletelist,//传递一个需要删除的数组进去     尚未设置多选可以单独传进去设置成数组形式
                // }
                    headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                // console.log(arrdeletelist)
                //删除收藏夹成功！！！
                if(data.data.code==20000){
                    console.log(data.data.message)
                    /*删除成功之后进行局部刷新一下！！！！！ */
                    // window.location.href="/setup";
                    // this.listcollect=true;
                    //删除之后重新加载收藏夹内容
                    axios({
                        url:`/collectionName/queryCollectionName?userId=${userid.innerHTML}`,
                        method:'get',
                        data :{
                            // userId:userid.innerHTML,
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data => {
                        console.log("7777777777888888")
                        //遍历所有收藏夹
                        if(data.data.code==20000){
                            console.log("111111")
                            console.log(data.data.data)
                            this.collectlist=data.data.data
                            console.log(this.collectlist)
                        }else{
                            console.log(data.data.data)
                            console.log("77777777777777777777777")
                        }
                        
                    }).catch(err => {
                        console.log(err)
                    })

                }else{
                    console.log(data.data.message)
                }
                console.log(data)
            }).catch(err => {
                console.log(err)
            })
        },


    },
    components:{
       Ifyes,Report,Talk,Like,Love
    }
}
</script>

<style lang="less" scoped>
*{
    padding: 0px;
    margin: auto;
}
html,body,.allset{
    height: 100%;
}
.allset{
    .accountcontain{
        font-size: 0.3rem;
        p{
            height: 0.5rem;
            margin-left: 5%;
            padding: 0.3rem
        }
        div{
            padding: 0.2rem;
            margin: 0.2rem auto;
            width: 100%;
            height: 10%;
            // background-color: pink;
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .btn{
                float: right;
                margin-top: 5%;
                button{
                        padding: 0.2rem;
                        border-radius: 0.2rem;
                        border: none;
                        margin-right: 50%;
                        float: right;
                        width: 100%;
                }
            }
        }
    }
    .Top{
        margin-top: 2%;
    }
    .alltext{
        height: 100%;
        div{
            border: 1px solid  rgb(245 245 247);
            height: 5%;
        }
        .alltext_text{
            float: left;
            margin-left: 5%;
            padding: 0.25rem;
        }
        .alltext_icon{
            margin-right: 1%;
            float: right;
            margin-top: 0.25rem;
        }
    }
    
}

.list ul{
    padding: 0.2rem;
    width: 100%;
    li{
        // text-align: center;
        border-bottom: 1px solid rgb(245 245 247);
    }
    button{
        width: 1.2rem;
        margin: 0.2rem 0.2rem;
        outline: none;
        border: none;
    }
}


//收藏夹内容
.collect{
    height: 100%;
    width: 100%;
    div{
        width: 100%;
        height: 100%;
        div{
            width: 100%;
            height: 10%;
            // background-color: red;
            margin: 0.2rem 0rem;
            border-bottom: 1px solid rgb(245 245 247);
            .collecttext{
                float: left;
                width: 60%;
                margin-top: 6%;
                font-size: 0.4rem;
                // color: gray;
                // background-color: pink;
                text-align: center;
                }
                .collectbtn{
                    float: right;
                    width: 40%;
                    margin-top: 4%;
                    // background-color: black;
                    text-align: right;
                    button{
                        margin: 0rem 0.2rem;
                        color: white;
                        padding: 0.2rem;
                        border-radius: 20%;
                        border-color: transparent;
                    }
                    .lookcollectcontain{
                        /*查看收藏夹按钮 */
                        background-color: cadetblue;
                    }
                    .deletecollect{
                        background-color:brown;
                    }
                }
            }
        }
}


.post{
    background-color: white;
    padding: 0.25rem;
    margin-bottom: 0.3rem;
    overflow: auto;
    .top{
        display: inline-flex;
        justify-content: space-between;
        flex-direction: row;
        padding-bottom: 0.2rem;
        width: 100%;
        a{
            display: inline-flex;
            align-items: center;
            color: #4b4b4b;
            font-size: 0.4rem;
            p{
                margin-left: 0.1rem;
            }
        }
        
    }
    .font{
        margin-bottom: 0.2rem;
        font-size: @fontSmall;
    }
    .pic{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        
        .van-image{
            margin-right: 0.15rem;
            margin-bottom: 0.2rem;
        }
        
    }
    .bottom{
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-evenly;
    }
}


//修改密码的弹窗
.changepasswordcontain{
    div{
        height: 100%;
        width: 100%;
        p{
            height: 12%;
            margin: 0.5rem;
            input{
                width: 100%;
                height: 100%;
                border: 1px solid black;
                outline: none;
                text-indent: 0.5rem;
            }
            button{
                padding: 0.2rem;
                margin: 0.3rem;
                border: none;
                outline: none;
            }
        }
    }
}
</style>